<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>弹幕引擎Demo</title>
    <script src="../dist/openBSE.all.min.js"></script>
    <script>
        window.onload = function () {
            var versionInfo = openBSE.getVersion();
            document.getElementById("version").innerText = versionInfo.version;
            document.getElementById("buildDate").innerText = versionInfo.buildDate;
            window.bulletScreenEngine = new openBSE.BulletScreenEngine(document.getElementById('BulletScreensDiv'), {
                defaultStyle: {
                    fontFamily: 'Microsoft Yahei UI, Microsoft Yahei, SimHei, Heiti SC, sans-serif',
                    borderColor: 'rgba(0,0,0,0.4)'
                }
            });

            var contextmenu = new openBSE.Contextmenu(bulletScreenEngine, document.getElementById('contextmenu'));

            bulletScreenEngine.bind('click', function (e) {
                document.getElementById("clickText").innerText = e.getBulletScreen().text;
                e.setBulletScreen({
                    style: { color: 'red' },
                    layer: 2
                }, true);
            });

            loadData(bulletScreenEngine);
            setInterval(showDebugInfo, 500);
        }
        var loadData = function (bulletScreenEngine) {
            var _startTime = 5000;
            for (var i = 0; i < 10000; i++) {
                if (Math.random() > 0.6)
                    bulletScreenEngine.addBulletScreen({
                        text: "这是一个长长长长长长长长长长长长长长长长长长长长长长长长的测试(^_^)",
                        startTime: _startTime,
                        type: openBSE.BulletScreenType.rightToLeft,
                        style: {
                            speed: 0.15 + Math.random() / 90,
                            size: 23,
                            color: 'white'
                        }
                    });
                else
                    bulletScreenEngine.addBulletScreen({
                        text: "橘里橘气",
                        startTime: _startTime,
                        type: (Math.random() > 0.4) ? openBSE.BulletScreenType.rightToLeft : openBSE.BulletScreenType.top,
                        style: {
                            speed: 0.1 + Math.random() / 90,
                            color: '#FFCC66'
                        }
                    });
                _startTime += parseInt(Math.random() * 300);
            }
        }
        var showDebugInfo = function () {
            var debugInfo = bulletScreenEngine.getDebugInfo();
            document.getElementById("time").innerText = debugInfo.time.toString();
            document.getElementById("delay").innerText = debugInfo.delay.toString();
            document.getElementById("fps").innerText = debugInfo.fps.toString();
            document.getElementById("BulletScreensOnScreenCount").innerText = debugInfo.bulletScreensOnScreenCount.toString();
            document.getElementById("BulletScreensCount").innerText = debugInfo.bulletScreensCount.toString();
            document.getElementById("delayBulletScreensCount").innerText = debugInfo.delayBulletScreensCount.toString();
        }
        function sendBulletScreen() {
            var bulletScreenText = document.getElementById("BulletScreenText").value;
            document.getElementById("BulletScreenText").value = '';
            bulletScreenEngine.addBulletScreen({
                text: bulletScreenText,
                style: {
                    boxColor: 'white'
                },
                layer: 1,
                canDiscard: false
            });
        }
        function sethiddenTypes() {
            var formData = new FormData(document.getElementById("hiddenTypes"));
            var hiddenTypesList = formData.getAll('hiddenTypes');
            var hiddenTypes = 0;
            for (var index in hiddenTypesList) hiddenTypes += parseInt(hiddenTypesList[index]);
            bulletScreenEngine.setOptions({
                hiddenTypes: hiddenTypes
            });
        }
        function set(key, value) {
            var object = {};
            object[key] = value;
            bulletScreenEngine.setOptions(object);
        }
    </script>
</head>

<body>
    <p style="font-size: 70%">引擎版本：<b id="version"></b>&nbsp;构建时间：<b id="buildDate"></b></p>
    <div style="width:936px;height:526.5px;position:relative;">
        <div style="left:0;top:0;right:0;bottom:0;position:absolute;background:url(./images/background.jpg);background-size: 100%;"></div>
        <div id="BulletScreensDiv" style="left:0;top:0;right:0;bottom:0;position:absolute;"></div>
    </div>
    <p><input type="text" style="width:500px;" id="BulletScreenText">&nbsp;<a href="#" onclick="sendBulletScreen();">发送</a></p>
    <p>
        隐藏弹幕：
        <form id="hiddenTypes" onclick="sethiddenTypes();">
            <input type="checkbox" value="1" name="hiddenTypes">普通&nbsp;
            <input type="checkbox" value="2" name="hiddenTypes">逆向&nbsp;
            <input type="checkbox" value="4" name="hiddenTypes">顶部&nbsp;
            <input type="checkbox" value="8" name="hiddenTypes">底部&nbsp;
        </form>
    </p>
    <p>上次单击的弹幕内容：<b id="clickText">无</b></p>
    <p>时间：<b id="time"></b> fps：<b id="fps"></b></p>
    <p>实时弹幕条数：<b id="BulletScreensOnScreenCount"></b>&nbsp;剩余弹幕条数：<b id="BulletScreensCount"></b></p>
    <p>延迟：<b id="delay"></b>ms 延迟丢弃丢弃弹幕数：<b id="delayBulletScreensCount"></b></p>
    <a href="#" onclick="bulletScreenEngine.play();">开始</a>&nbsp;<a href="#" onclick="bulletScreenEngine.pause();">暂停</a>&nbsp;<a
        href="#" onclick="bulletScreenEngine.stop();">停止</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.show();">显示弹幕</a>&nbsp;<a href="#" onclick="bulletScreenEngine.hide();">隐藏弹幕</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.cleanBulletScreenList();loadData(bulletScreenEngine);">重新加载弹幕</a>&nbsp;<a
        href="#" onclick="bulletScreenEngine.cleanScreen();">清空屏幕弹幕</a>&nbsp;<br>
    <a href="#" onclick="set('playSpeed', 1);">1倍速</a>&nbsp;<a href="#" onclick="set('playSpeed', 1.5);">1.5倍数</a>&nbsp;
    <a href="#" onclick="set('playSpeed', 2);">2倍速</a>&nbsp;<a href="#" onclick="set('playSpeed', 2.5);">2.5倍数</a>&nbsp;
    <a href="#" onclick="set('scaling', 1);">1倍缩放</a>&nbsp;<a href="#" onclick="set('scaling', 1.5);">1.5倍缩放</a>&nbsp;
    <a href="#" onclick="set('scaling', 2);">2倍缩放</a>&nbsp;<a href="#" onclick="set('scaling', 0.75);">0.75倍缩放</a>&nbsp;<br>
    <a href="#" onclick="set('opacity', 0);">100%透明</a>&nbsp;<a href="#" onclick="set('opacity', 0.25);">75%透明</a>&nbsp;
    <a href="#" onclick="set('opacity', 0.5);">50%透明</a>&nbsp;<a href="#" onclick="set('opacity', 0.75);">25%透明</a>&nbsp;
    <a href="#" onclick="set('opacity', 1);">不透明</a>
    <div id="contextmenu" style="padding:3px;width:120px;height:19px;position:fixed;border:1px solid black;background:rgba(255, 255, 255, 0.9);font-size: 13px;display:none;cursor: default;">上下文菜单</div>
</body>

</html>